<template>
  <div>

    <Panel title="套餐活动购买选项" useBack>
         <ModifyForm
        slot="body"
        :editColumn="editColumn"
        :temporaryData='temporaryData'
        labelWidth="150px"
        :updateData="updateData"
      >
        <p
          slot="title"
        ></p>
        <div slot="timeTamp">
          <el-date-picker
          v-model="appointmentTime"
          type="datetime"
          unlink-panels
          value-format="timestamp"
          :picker-options="pickerOptions1"
          style="height:40px"
        ></el-date-picker>
        </div>
        <!-- 生效时间 -->
        <div slot="timePost">
          <el-date-picker
          v-model="appointmentTimePost"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
          :picker-options="pickerOptions"
          style="height:40px"
        ></el-date-picker>
        </div>
        <!-- 描述 -->
        <div slot="desc" style="margin-bottom:100px">
          <quill-editor 
                  v-model="desc" 
                  slot="body" ref="myQuillEditor" 
                  style="height: 300px" 
                  :options="editorOption">
                </quill-editor>
        </div>

      </ModifyForm>
    </Panel>
  </div>
</template>
<script>
import Panel from "@/components/Panel";
import ModifyForm from "@/components/ModifyForm";
import ModalPanel from "@/components/ModalPanel";
import FileUpload from '@/components/FileUpload';
import request from "@/tools/request";
import { dateFormat } from "@/tools/time";

export default {
  name:'comboBuyInfo',
  components: {
    FileUpload,
    Panel,
    ModalPanel,
    ModifyForm
  },
  data() {
    return {
      configValue:"",
      desc:'',
      editorOption: {},
      appointmentTimePost: null,
      myQuillEditor:'',
      typeList: [],
      cid:'',
      temporaryData: {
        coverImg: [],
        publishStatus: false
      },
      appointmentTime: null,
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      pickerOptions1: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      editColumn: [
        {
          name: "选择套餐",
          prop: "cid",
          type: "select",
          optionBindLabel: 'name',
          optionBindValue: 'id',
          optionList: [{'id': '','name': "请选择"}],
          onChange: () => {},
          width:12,
          required: true,
        },
        {
          name: "赠送月数 ",
          prop: "giveElectricity",
          type: "number",
          width:12,
          required: true
        },
        {
          name: "购买月数",
          prop: "num",
          type: "number",
          width:12,
          required: true
        },
        {
          name: "价格",
          prop: "price",
          type: "number",
          width:12,
          required: true
        },

      ],
    };
  },
  computed: {
 

  },
  methods: {
   async updateData(values) {
     let comboBeginTime = dateFormat(this.appointmentTime ? this.appointmentTime : undefined, 'yyyy-MM-dd HH:mm:ss')
     let endTime = dateFormat(this.appointmentTimePost ? (this.appointmentTimePost[1] + 86400000-1000) : undefined, 'yyyy-MM-dd HH:mm:ss')
     let  beginTime = dateFormat(this.appointmentTimePost ? this.appointmentTimePost[0] : undefined, 'yyyy-MM-dd HH:mm:ss')
     let desc = this.desc
     const {grant, id, name, total, low, state, type, mark, received, comboExpire, price, beginType, comboElectricity} = values
     let url = id ? "/combo/update": "/combo/add"
     let msg = id ? "编辑成功" : "添加成功"
     let res = await request({
       url: url,
       method: "POST",
       data:{endTime, beginTime, grant, id, name, total, low, state, type, mark, received, comboBeginTime, comboExpire, desc, price, beginType, comboElectricity}
     })
     if(res.code !==0) return
      this.$message.success(msg)
      this.$router.go(-1)
    },
    async fetchData(id){
      let { combo } = await request({
        url: "/combo/info/"+id,
        method: "GET",
        data: {}
      });
      
      this.appointmentTime =new Date('20'+combo.comboBeginTime).getTime()
       this.appointmentTimePost = [new Date('20'+combo.beginTime).getTime(), new Date('20'+combo.endTime).getTime() - 86400000+1000]
       this.desc = combo.desc
      this.temporaryData = combo
    },
    //套餐
    async getCombo(){
      let { list } = await request({
        url: "/personal/combo/select",
        method: "GET",
      });
      this.editColumn[0].optionList = list
    }
  },
  
  created() {
    if(this.$route.query.id)
      this.fetchData(this.$route.query.id)
      this.getCombo()
  }
};
</script>

<style lang='scss' module>

</style>